<template>
  <div>
    <!-- 卡片视图 -->
    <el-card shadow="always">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运营</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品及定价</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框 -->
      <el-input
        placeholder="请输入单位名称"
        class="search"
        v-model="searchData"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>>
        <el-button slot="append" @click="searchBtn" :disabled="isDisabled">搜索</el-button>
      </el-input>
      <el-tooltip
        class="top-right-button"
        effect="dark"
        content="跟据单位和报销分类初始化商品"
        placement="top"
        :enterable="false">
        <el-button type="success" size="medium " @click="initGoods">
          <i class="el-icon-s-shop" style="margin: 0 auto"></i>
        </el-button>
      </el-tooltip>

      <!-- 数据列表 -->
      <el-table :data="tableData" border>
        <el-table-column type="index" label="#" width="75"></el-table-column>
        <el-table-column prop="company_title" label="单位名称"></el-table-column>
        <el-table-column
          prop="expenseCate_title"
          label="报销分类"
        ></el-table-column>
        <el-table-column label="操作" width="70">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              content="详情"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="mini"
                type="primary"
                @click.stop="showDetail(scope.row.id)"
              >
                <i class="el-icon-s-operation" style="margin: 0 auto"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="p"
        :page-sizes="[10, 20, 50, 80]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { get } from "../../../../../public/API/query";
import config from "../../../../../public/config";

export default {
  data() {
    const blurText = async (rule, value, callback) => {
      // const reg = /^\-\d\.?\d*$/
      // const boolean = reg.test(value)
      const boolean = new RegExp("^[1-9][0-9]*$").test(value); // console.log(boolean)
      if (!boolean) {
        this.$message.warning("请输入正整数");
        this.subSkuForm.daysNum = "";
      }
    };
    const price = (rule, value, callback) => {
      const reg = /^\d+.?\d{0,2}$/;
      if (!value) {
        callback(new Error("请输入价格"));
      } else if (!Number(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("小数点后最多只能输入两位"));
        }
      }
    };

    return {
      //搜索
      searchData: "",
      //列表数据
      tableData: [],
      //查询参数
      p: 1,
      limit: 10,
      //总条数
      count: null,
      isDisabled: false,
      addSkuDialogVisible: false,
      editSkuDialogVisible: false,
      goodDetailDialogVisible: false,
      subSkuDialogVisible: false,
      goodsDetailInfo: [],
      subSkuForm: {
        id: "",
        daysNum: "",
        priceDel: "",
        priceReal: "",
      },
      subSkuRules: {
        daysNum: [
          { required: true, message: "请输入天数", trigger: "blur" },
          { validator: blurText, trigger: "blur" },
        ],
        priceDel: [
          { required: true, message: "请输入划线价格", trigger: "blur" },
          { validator: price, trigger: "blur" },
        ],
        priceReal: [
          { required: true, message: "请输入真实价格", trigger: "blur" },
          { validator: price, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 获取列表数据
    getTableData(title) {
      let params = {
        p: this.p,
        limit: this.limit,
      }
      if (title) {
        params.title = title
      }
      get("operate/commodity/commodityprice/index",params,(res) => {
          if (res.code == 200) {
            this.tableData = res.data._list;
            this.count = res.data.count;
          }
        }
      );
    },

    handleSizeChange(newSize) {
      this.limit = newSize;
      this.getTableData();
    },
    handleCurrentChange(newPage) {
      this.p = newPage;
      this.getTableData();
    },
    //搜索功能
    searchBtn() {
      this.getTableData(this.searchData);
    },
    // 详情
    showDetail(id) {
      this.$router.push(
        `/adIndex/operate/commodity/commodityprice/priceDetail/${id}`
      );
    },
    // 跟据单位和报销分类初始化商品
    initGoods() {
      get("operate/commodity/commodityprice/accordingToInitia", {}, (res) => {
        if (res.code == 200) {
          this.getTableData()
          this.$message.success("跟据单位和报销分类初始化商品成功！");
        }
      });
    },
    // 添加sku
    addSku(id) {
      get("operate/commodity/commodityprice/skuAddPage", { id }, (res) => {
        if (res.code == 200) {
          this.$message.success("添加成功！");
        }
      });
    },
    // 编辑sku页
    editSku(id) {
      get("operate/commodity/commodityprice/skuEdit", { id }, (res) => {
        console.log(res);
      });
    },
    showSubSku(id) {
      this.subSkuForm.id = id;
      this.subSkuDialogVisible = true;
    },
    // 提交sku
    subSku() {
      this.$refs["subSkuFormRef"].validate((valid) => {
        if (valid) {
          get(
            "/operate/commodity/commodityprice/skuSub",
            {
              id: this.subSkuForm.id,
              daysNum: this.subSkuForm.daysNum,
              priceDel: this.subSkuForm.priceDel,
              priceReal: this.subSkuForm.priceReal,
            },
            (res) => {
              if (res.code == 200) {
                this.$message.success("提交成功！");
                this.subSkuDialogVisible = false;
              }
            }
          );
        }
      });
    },
    // 提交sku对话框关闭的回调
    subSkuClose() {
      this.subSkuForm = {};
    },
  },
  watch: {
    searchData: function() {
      if (!this.searchData) {
        this.getTableData();
      }
      if (this.searchData) {
        this.isDisabled = false;
      }
    },
  },

  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 30px;
}

.el-pagination {
  margin-top: 30px;
}
.addRulesWrap {
  margin-left: 80px;
}
.addRules {
  position: absolute;
  right: 25%;
  bottom: 5%;
}
.disable {
  margin-left: 15px;
}
.dialog-content-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.top-right-button {
  margin-left: 60%;
}
.search {
  width: 280px;
  margin-right: 30px;
  margin-bottom: 30px;
}
</style>
